<template>
	<view>
		<view class="cu-bar bg-white search">
		  <view class="search-form">
		    <text class="cuIcon-search"></text>
		    <input type="text" v-model="filter" placeholder="输入客户登录ID搜索" confirm-type="search" @confirm="search"></input>
		  </view>
		  <view class="action">
		    <button class="cu-btn bg-gradual-green shadow-blur" @tap="search">搜索</button>
			<button class="margin-left-xs cu-btn bg-gradual-blue shadow-blur" @tap="isEdit=false;formModal=true">新增客户</button>
		  </view>
		</view>
		<view class="cu-list menu">
			<view v-for="(item,index) in list" :key="index" class="cu-item">
				<view class="content">
					<text class="cuIcon-profile text-green"></text>
					<text class="text-grey">{{item.loginId}}({{item.name}})</text>
				</view>
				<view class="action">
					<button class="cu-btn radius bg-gradual-green shadow" @tap="simulationLogin(item._id,item.token)">
						<text class="cuIcon-ticket"></text>
						<text class="margin-left-xs">模拟</text>
					</button>
					<button class="cu-btn radius bg-gradual-blue shadow margin-left-xs" @tap="clickEdit(index)">
						<text class="cuIcon-edit"></text>
					</button>
					<button class="cu-btn radius bg-gradual-red shadow margin-left-xs" @tap="clickDelete(item._id)">
						<text class="cuIcon-close"></text>
					</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="formModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{isEdit?'修改':'新增'}}客户</view>
					<view class="action" @tap="formModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<view class="cu-form-group">
						<view class="title">客户名称:</view>
						<input style="text-align:left;" v-model="form.name"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">登录账号:</view>
						<input style="text-align:left;" v-model="form.loginId"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">登录密码:</view>
						<input style="text-align:left;" v-model="form.loginPass" type="password" placeholder="修改时不修改密码留空即可"></input>
					</view>
					<button class="cu-btn lg bg-blue" @tap="clickSubmitForm">确认{{isEdit?'修改':'新增'}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit:false,
				formModal:false,
				form:{
					name:'',
					loginId:'',
					loginPass:''
				},
				filter:'',
				page:1,
				rowsPerPage:10,
				rowsNumber:0,
				list:[]
			};
		},
		onShow(){
			this._getList();
		},
		methods:{
			_getList(){
				this.$u.api.admin_customerList({filter:this.filter,page:this.page,rowsPerPage:this.rowsPerPage}).then(data => {
					this.rowsNumber=data.rowsNumber;
					this.list=data.list;
					console.log(data);
				})
			},
			search(){
				this.page=1;
				this._getList();
			},
			simulationLogin(_id,token){
				uni.setStorageSync('customer_id',_id);
				uni.setStorageSync('customer_token',token);
				uni.navigateTo({
					url:'/pages/customer/main'
				})
			},
			clickDelete(_id){
				uni.showModal({
				    title: '确认删除',
				    content: '您确认要删除这个客户么？删除后不可恢复数据！',
				    success: (res)=> {
				        if (res.confirm) {
				            this.$u.api.admin_customerDelete({_id:_id}).then(data => {
				            	this._getList();
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			clickEdit(index){
				let data=this.list[index];
				this.form._id=data._id;
				this.form.loginId=data.loginId;
				this.form.name=data.name;
				this.isEdit=true;
				this.formModal=true;
			},
			clickSubmitForm(){
				if(this.isEdit){
					this.$u.api.admin_customerEdit(this.form).then(data => {
						this.formModal=false;
						this._getList();
					})
				}else{
					delete this.form._id;
					this.$u.api.admin_customerAdd(this.form).then(data => {
						this.formModal=false;
						this._getList();
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">

</style>
